<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>太极阵</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		#box {
			width: 400px;
			height: 400px;
			margin: 100px auto;
			border: 1px solid #ccc;
		}
		
		.box1 {
			width: 200px;
			height: 100px;
			background: #fff;
			border-radius: 50%;
			position: relative;
			margin: 100px auto;
			border: 3px solid #000;
			border-bottom: 100px solid black;
			animation: round 4s infinite linear;
			-moz-animation: round 4s infinite linear; /* Firefox 4 */
			-webkit-animation: round 4s infinite linear; /* Safari 和 Chrome */
			-o-animation: round 4s infinite linear; /* Opera */
		}
		@-webkit-keyframes round{
			from{transform:rotate(0deg)}
			to{transform: rotate(360deg)}
		}
		@-moz-keyframes round{
			from{transform:rotate(0deg)}
			to{transform: rotate(360deg)}
		}
		@-ms-keyframes round{
			from{transform:rotate(0deg)}
			to{transform: rotate(360deg)}
		}
		@-o-keyframes round{
			from{transform:rotate(0deg)}
			to{transform: rotate(360deg)}
		}
		.left,
		.right {
			position: absolute;
		    width: 20px;
		    height: 20px;
		    top: 50%;
		    border: 40px;
		    border-style: solid;
		    border-radius: 50%;
		}
		
		.left {
			background: #fff;
			left: 0;
			border-color:#000;
		}
		
		.right {
			background: #000;
			right: 0;
			border-color:#fff;
		}
	</style>

	<body>
		<h1 style="text-align: center;">太极阵</h1>
		<div id="box">
			<div class="box1">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</body>

</html>